<template>
    <div class="remind-box">
        <div class="top-box">
            <span>提醒设置</span
            ><el-switch :value="props.setInfo.remind" :active-value="1" :inactive-value="2" @click="changeStatus" />
        </div>
        <div class="remind-tabs">
            <el-tabs v-if="props.setInfo.remind == 1" v-model="activeName" class="demo-tabs" @tab-change="tagChangeFun">
                <el-tab-pane
                    v-for="(item, index) in tabList"
                    :key="item.id"
                    class="tab-item-box"
                    :label="item.name"
                    :name="index + ''">
                    <div v-if="item.list && item.list.length > 0" class="title">
                        <span>员工跟进提醒</span
                        ><el-switch
                            :active-value="1"
                            :inactive-value="2"
                            :value="item.reminder_switch"
                            @click="eidtSwitchFun(item)" />
                    </div>
                    <div v-if="item.reminder_switch == 1">
                        <el-scrollbar max-height="300px">
                            <div v-if="item.list && item.list.length" class="remind-list">
                                <div v-for="(it, ind) in item.list" :key="it" class="item">
                                    <div v-if="ind < item.list.length - 1" class="stepBox">
                                        <div class="line"></div>
                                    </div>
                                    <div class="desc">
                                        <div v-if="!it.isEdit">
                                            <div class="desc-item">
                                                <span> 客户 </span>
                                                <span style="color: red">{{ typeOptions[it.type - 1].label }}</span>
                                                <span> 超过{{ it.time }}天后，</span> 次日{{ it.sart_remind }}提醒
                                            </div>
                                            <span class="img-box">
                                                <img src="@/assets/customer/del-icon.png" alt="" @click="delFun(it)" />
                                                <img
                                                    src="@/assets/customer/edit-icon.png"
                                                    alt=""
                                                    @click="editFun(it)" />
                                            </span>
                                        </div>
                                        <div v-else class="create-box">
                                            <span>客户</span>
                                            <el-select v-model="it.type" placeholder="请选择" style="width: 180px">
                                                <el-option
                                                    v-for="itm in typeOptions"
                                                    :key="itm.value"
                                                    :label="itm.label"
                                                    :value="itm.value" />
                                            </el-select>
                                            <span>超过</span>
                                            <el-input-number v-model="it.time" style="width: 140px" :min="0" />
                                            <span>后，次日</span>
                                            <el-time-picker
                                                v-model="it.sartTime"
                                                :editable="false"
                                                style="width: 140px"
                                                placeholder="请选择时间"
                                                @change="checkTimeFun($event, it)" />
                                            <span>提醒</span>
                                            <el-button type="primary" @click="saveFun(it)">保存</el-button>
                                            <el-button @click="cancelFun(it)">取消</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
                        </el-scrollbar>
                    </div>
                    <div v-if="showCreate" class="create-box">
                        客户
                        <el-select v-model="createInfo.type" placeholder="请选择" style="width: 180px">
                            <el-option
                                v-for="itm in typeOptions"
                                :key="itm.value"
                                :label="itm.label"
                                :value="itm.value" />
                        </el-select>
                        <span>超过</span>
                        <el-input-number v-model="createInfo.time" style="width: 140px" :min="0" />
                        <span>天后，次日</span>
                        <el-time-picker
                            v-model="createInfo.sartTime"
                            :editable="false"
                            style="width: 140px"
                            placeholder="请选择时间"
                            @change="checkTimeFun($event, createInfo)" />
                        <span>提醒</span>
                        <el-button type="primary" @click="createFun">创建</el-button>
                        <el-button @click="closeCreate">取消</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <el-button v-show="props.setInfo.remind == 1" class="addBtn" @click="showCreateFun">新增提醒</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { remindCreate, remindUpdate, remindDel, remindList, remindSwitch } from '../../api';
import { ElMessage, ElMessageBox } from 'element-plus';
const activeName = ref('0');
const props = defineProps(['tableList', 'setInfo']);
const emit = defineEmits(['changeStatus']);
const tabList = ref(JSON.parse(JSON.stringify(props.tableList)));
const tabIndexid = ref();

const createInfo = ref({
    isEdit: false, //是否是编辑
    type: '',
    time: 0,
    sart_remind: '',
    sartTime: ''
}); //创建的数据
const typeOptions = ref([
    { label: '本阶段未联系', value: 1 },
    { label: '本阶段停留时间', value: 2 },
    { label: '变更为本阶段', value: 3 }
]);

const showCreate = ref(false);
// 新增提醒
const showCreateFun = () => {
    showCreate.value = true;
};
// 取消创建
const closeCreate = () => {
    showCreate.value = false;
    createInfo.value = {
        isEdit: false, //是否是编辑
        type: '',
        time: 0,
        sartTime: '',
        sart_remind: ''
    };
};

// 处理时间
const checkTimeFun = (ev, val) => {
    const time = new Date(ev);
    const hour = time.getHours();
    const minute = time.getMinutes();
    const second = time.getSeconds();
    val.sart_remind = `${hour >= 10 ? hour : '0' + hour}:${minute >= 10 ? minute : '0' + minute}:${
        second >= 10 ? second : '0' + second
    }`;
};

// 获取提醒列表
const remindListFun = () => {
    tabIndexid.value = tabList.value[activeName.value].id;
    remindList({ stage_id: tabList.value[activeName.value].id }).then((r: any) => {
        r = r || [];
        r.forEach((it: any) => {
            it.sartTime = it.created_at.split(' ')[0].replace(/-/g, '/') + ' ' + it.sart_remind;
        });
        tabList.value[activeName.value].list = r;
        tabList.value[activeName.value].reminder_switch = r.length > 0 ? r[0].reminder_switch : 2;
    });
};
remindListFun();
const changeStatus = () => {
    emit('changeStatus', 'remind');
};

// 切换
const tagChangeFun = () => {
    closeCreate();
    remindListFun();
};

// 展示编辑
const editFun = (val: any) => {
    val.isEdit = true;
};
// 取消编辑
const cancelFun = (val: any) => {
    val.isEdit = false;
};

// 删除
const delFun = (val: any) => {
    const index = tabList.value[activeName.value].list.findIndex((it: any) => {
        return it.id == val.id;
    });
    ElMessageBox.confirm(`是否确认删除？`, '删除提醒', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            remindDel({ stage_id: tabList.value[activeName.value].id, remind_id: val.id }).then((r: any) => {
                ElMessage.success('删除成功');
                tabList.value[activeName.value].list.splice(index, 1);
                remindListFun();
            });
        })
        .catch(() => {});
};

// 检查数据是否正常
const checkDataFun = (data: any) => {
    if (!data) {
        return false;
    }
    const keysArr = ['type', 'time', 'sart_remind'];
    let canSave = true;
    keysArr.forEach(it => {
        if (it == 'time') {
            if (data[it] === '' || data[it] === null || data[it] === undefined) {
                canSave = false;
            }
        } else {
            if (!data[it]) {
                canSave = false;
            }
        }
    });
    if (!canSave) {
        ElMessage.error('请填写完整');
    }
    return canSave;
};
// 编辑状态
const eidtSwitchFun = (val: any) => {
    remindSwitch({
        stage_id: tabList.value[activeName.value].id,
        reminder_switch: val.reminder_switch == 1 ? 2 : 1
    }).then((r: any) => {
        remindListFun();
    });
};

// 编辑保存
const saveFun = (val: any) => {
    if (!checkDataFun(val)) {
        return;
    }
    remindUpdate({
        stage_id: tabList.value[activeName.value].id,
        remind_id: val.id,
        reminder_switch: tabList.value[activeName.value].reminder_switch,
        ...val
    }).then((r: any) => {
        val.isEdit = false;
        ElMessage.success('保存成功');
        remindListFun();
    });
};
//创建
const createFun = () => {
    if (!checkDataFun(createInfo.value)) {
        return;
    }
    remindCreate({
        stage_id: tabList.value[activeName.value].id,
        reminder_switch: 1,
        ...createInfo.value
    }).then((r: any) => {
        closeCreate();
        remindListFun();
        ElMessage.success('保存成功');
    });
};
defineExpose({ tagChangeFun, tabIndexid }); //像父组件抛出方法
</script>

<style lang="scss" scoped>
.remind-box {
    .remind-tabs {
        position: relative;
    }

    :deep(.el-tabs__nav-scroll) {
        margin-right: 120px;
    }

    :deep(.el-tabs__nav-next),
    :deep(.el-tabs__nav-prev) {
        line-height: 60px;
    }

    :deep(.el-tabs__item) {
        height: auto;
        line-height: normal;
        font-size: 14px;
        padding: 20px !important;
    }

    .addBtn {
        position: absolute;
        right: 24px;
        top: 12px;
        height: 36px;
        background: #f9f9f9;
        border-radius: 4px;
        border: 1px solid #eaeaea;
    }

    .top-box {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #33302d;
        margin-bottom: 24px;

        span {
            margin-right: 10px;
        }
    }

    .demo-tabs {
        height: 400px;
        border: solid 1px #eaeaea;

        .tab-item-box {
            padding: 28px 24px;

            .title {
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #33302d;
                margin-bottom: 16px;

                span {
                    margin-right: 10px;
                }
            }

            .remind-list {
                // height: 300px;
                // max-height: 300px;
                // overflow-y: auto;
                .item {
                    padding-left: 23px;
                    position: relative;
                    padding-bottom: 28px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .desc-item {
                        display: inline-block;
                        width: 400px;
                    }

                    .img-box {
                        margin-left: 74px;

                        img {
                            width: 18px;
                            height: 18px;
                            margin-right: 14px;
                            cursor: pointer;
                        }
                    }

                    .stepBox {
                        position: absolute;
                        left: 0;
                        top: 4px;
                        display: flex;
                        height: calc(100% + 12px);
                        align-items: center;

                        &::after,
                        &::before {
                            box-sizing: border-box;
                            position: absolute;
                            content: '';
                            left: 2px;
                            width: 8px;
                            height: 8px;
                            background: #fff;
                            border: 2px solid #ff6b00;
                            border-radius: 50%;
                        }

                        &::before {
                            top: 4px;
                        }

                        &::after {
                            bottom: 0;
                        }

                        .line {
                            position: absolute;
                            width: 1px;
                            border-left: dashed 1px #ffc69e;
                            height: calc(100% - 32px);
                            left: 6px;
                            top: 18px;
                            z-index: 1;
                        }
                    }
                }
            }

            .create-box {
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #33302d;

                span {
                    margin: 0 12px;

                    &:first-child {
                        margin-left: 0;
                    }
                }
            }
        }
    }
}
</style>
